<template>
	<view class="page">
		<!-- <TopTip color="#FF7F7F" bcolor="#F8E8E7">
      剩余支付时间 {{ minutes }}:{{ seconds }}，过期将自动取消
    </TopTip> -->

		<view class="tcard">
			<view class="top">
				<view class="">
					支付金额（元）
				</view>
				<view class="money">
					{{params.zje}}
				</view>
			</view>
			<view class="tform">
				<view class="tform-item">
					<view class="label">
						业务类型
					</view>
					<view class="value">
						预约挂号费用
					</view>
				</view>
			</view>
		</view>

		<view class="txttip">
			选择支付方式
		</view>

		<view class="pay-type-box">
			<view class="pay-type flexR">
				<view class="left">
					<img class="logo" src="../../../static/images/bg-header/weixin_logo.png" alt="">
					<text>微信支付</text>
				</view>
				<view class="right">
					<radio :checked="check" @click="check = true" />
				</view>
			</view>
			<view class="pay-type flexR">
				<view class="left">
					<img class="logo" src="../../../static/images/bg-header/yb_logo.png" alt="">
					<text>医保支付</text>
				</view>
				<view class="right">
					<radio :disabled="true" :checked="!check" @click="" />
				</view>
			</view>
		</view>

		<TopTip :paddingPage="false">
			<view class="tip-title">
				温馨提示
			</view>
			<view class="">
				1、如需门诊医疗收费收据（发票），请前往收费处打印。
				2、交易扣费成功，系统交费失败时，您可以重新发起支付或选择其他途径继续交费。支付失败款项将在5个工作日内，原路返还到您的账号中，请您放心使用。
			</view>
		</TopTip>

		<view class="btn" :style="{opacity:minutes == 0 && seconds == 0?'0.4':'1'}" @click="toPay">
			{{minutes == 0 && seconds == 0?'已过期':'立即支付'}}
		</view>
	</view>
</template>

<script>
	import {
		cancelAppointment,
		poPayRegister
	} from '@/api/register.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		pay,
		registerback
	} from '@/api/physical.js'

	export default {
		data() {
			return {
				routeParams: {},
				params: {},
				// 倒计时
				minutes: 1,
				seconds: 0,
				countdownInterval: null,
				check: true
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad(opt) {
			this.routeParams = JSON.parse(opt.params)
			this.params = JSON.parse(opt.params)

			// this.startCountdown()
		},
		onUnload() {
			// clearInterval(this.countdownInterval);
		},
		methods: {
			...mapActions(['createPay']),
			startCountdown() {
				this.showCountdown = true;
				this.countdownInterval = setInterval(() => {
					if (this.minutes === 0 && this.seconds === 0) {
						clearInterval(this.countdownInterval);
						this.showCountdown = false;
						// 可以在这里添加倒计时结束后的操作
						this.$u.toast('已过期，即将返回首页')
						setTimeout(() => {
							uni.redirectTo({
								url: `/`
							})
						}, 1000)
					} else {
						if (this.seconds > 0) {
							this.seconds--;
						} else {
							this.minutes--;
							this.seconds = 59;
						}
					}
				}, 1000);
			},
			toPay() {
				let params = {
					money: this.params.zje,
					patId: this.userInfo.patId,
					sjh: this.params.sjh,
					tradeType: 1,
				}
				this.load = true;
				this.createPay(params).then((data) => {
					this.load = false;
					let paymentData;
					paymentData = {
						body: data.hisOrderId,
						orderId: data.hisOrderId,
						payMoney: this.params.zje,
						// payMoney: '0.01',
						spbCreIp: '127.0.0.1',
						openId: this.userInfo.userId,
						account: this.userInfo.userId
					}

					pay(paymentData).then(res => {
						// registerback({dealCode: data.hisOrderId}).then(res => {
						//   uni.hideLoading()
						//   uni.navigateTo({
						//     url: `./registerSuccess/registerSuccess?routeParams=${JSON.stringify(this.routeParams)}`
						//   })
						// })
						this.onBridgeReady(res, data.hisOrderId)
					})
				}).catch(e => {
					this.load = false
				})
			},

			toPay() {
				this.load = false;
				let paymentData;
				paymentData = {
					body: this.routeParams.hisOrderId,
					orderId: this.routeParams.hisOrderId,
					payMoney: this.params.zje,
					// payMoney: '0.01',
					spbCreIp: '127.0.0.1',
					openId: this.userInfo.userId,
					account: this.userInfo.userId
				}

				pay(paymentData).then(res => {
					// registerback({dealCode: data.hisOrderId}).then(res => {
					//   uni.hideLoading()
					//   uni.navigateTo({
					//     url: `./registerSuccess/registerSuccess?routeParams=${JSON.stringify(this.routeParams)}`
					//   })
					// })
					this.onBridgeReady(res, this.routeParams.hisOrderId)
				})
			},
			onBridgeReady(res, hisOrderId) {
				const routeParams = this.routeParams
				WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId": res.appId, //公众号ID，由商户传入     
						"timeStamp": res.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": res.nonceStr, //随机串     
						"package": res.package,
						// "signType": "RSA",     //微信签名方式：     
						"signType": "MD5", //微信签名方式：
						"paySign": res.paySign //微信签名 
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

							uni.showLoading({})
							registerback({
								dealCode: hisOrderId
							}).then(res => {
								uni.hideLoading()
								uni.navigateTo({
									url: `./registerSuccess?routeParams=${JSON.stringify(routeParams)}`
								})
							})
						}
					});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.money {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 52upx;
		color: #FFAA32;
		line-height: 44upx;
		margin: 40upx auto 60upx;
	}

	.top {
		text-align: center;
		border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
		padding-top: 24upx;
	}

	.tform-item {
		border: none;
	}

	.txttip {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		color: #666;
		line-height: 48upx;
		margin-bottom: 24upx;
	}

	.pay-type-box {
		background: #FFFFFF;
		border-radius: 8upx;
		border: 1px solid #E6E6E6;
		margin-bottom: 24upx;

		.pay-type {
			justify-content: space-between;
			align-items: center;
			padding: 32upx;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.logo {
					width: 48upx;
					margin-right: 34upx;
				}
			}

			&:nth-child(1) {
				border-bottom: 1px solid #E6E6E6;

				.logo {
					width: 48upx;
					margin-right: 34upx;
				}
			}

			&:nth-child(2) {
				.logo {
					width: 64upx;
					margin-right: 18upx;
				}
			}
		}
	}

	.tip-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28upx;
		color: #F77E0D;
		text-align: center;
	}

	.btn {
		margin: 80upx auto;
		// width: 620upx;
		height: 80upx;
		background: $theme-color;
		border-radius: 80upx;
		text-align: center;
		line-height: 80upx;
		color: #FFF;
	}

	.tip-title {}
</style>